{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>
  .main-container {
    background: #F4F4F4;
    text-align: center;
  }

  .filter-container {
    background: #FFFFFF;
    width: 100%;
    padding-bottom: 60px;
  }

  .filter-container > .filter-content {
    background: #fff;
    width: 1200px;
  }

  .filter-container > .filter-content > .filter-search {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: right;
  }

  #filter-building {
    padding-left: 8px;
    height: 35px;
  }

  .filter-submit {
    border: none;
    margin-left: -5px;
    height: 40px;
    width: 100px;
    background: #93412C;
    color: #FFFFFF;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 0 18px;
  }

  .filter-container > .filter-content > .filter-item {
    display: flex;
    text-align: left;
    font-size: 18px;
    padding-top: 22px;
    padding-left: 51px;
    padding-bottom: 15px;
    border-bottom: 1px #e6e6e6 solid;
    align-items: center
  }

  .filter-item > label {
    text-align: center;
  }

  .filter-container > .filter-content > .filter-item > div {
    font-size: 18px;
    margin-left: 80px;
  }

  .filter-container > .filter-content > .filter-item > div > a {
    margin-right: 52px;
    cursor: pointer;
    color: #212529;
  }

  .filter-container > .filter-content > .filter-item > div > .selected {
    background: #93412C;
    color: #FFFFFF;
    padding: 5px 20px;
  }

  .filter-container > .filter-content > .filter-item > div > .selected > a {
    background: #93412C;
    color: #FFFFFF;
  }

  .cases-container {
    width: 1200px;
  }

  .cases-container > .cases-list {
    width: 1200px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 60px;
  }

  .cases-container > .cases-list > .cases-item {
    width: 380px;
    margin-top: 30px;
    margin-right: 30px;
  }

  .cases-container > .cases-list > .cases-item:nth-child(3n+3) {
    width: 380px;
    margin-top: 30px;
    margin-right: 0px;
  }

  .cases-container > .cases-list > .cases-item > div {
    background: #ffffff;
    padding: 20px;
  }

  .cases-container > .cases-list > .cases-item > img {
    max-width: 100%;
  }

  .case-title {
    font-size: 18px;
    font-family: Source Han Sans CN;
    border-bottom: 1px #e5e5e5 solid;
    padding-bottom: 15px;
  }

  .case-detail {
    height: 40px;
    line-height: 40px;
    color: #ffffff;
    background: #93412C;
    border: none;
    font-size: 16px;
    font-family: Source Han Sans CN;
    margin-right: 8px;
    padding: 1px 12px;
  }

  .case-money {
    height: 40px;
    line-height: 40px;
    color: #ffffff;
    background: #93412C;
    border: none;
    font-size: 16px;
    font-family: Source Han Sans CN;
    margin-left: 8px;
    padding: 1px 12px;
  }

  .pagination {
    display: flex;
    justify-content: center;
    margin: 0 0 50px;
  }

  .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
    color: #ccc;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
  }

  .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #93412C;
    border-color: #93412C;
  }

  .pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 16px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #93412C;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-container .swiper-button-prev::after {
    content: '';
  }

  .swiper-container .swiper-button-next::after {
    content: '';
  }

  .swiper-container .swiper-button-prev {
    background-image: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/pc/left.png');
    left: 15px;
    right: auto;
    width: 30px;
    height: 30px;
    background-size: cover;
  }

  .swiper-container .swiper-button-next {
    background: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/pc/right.png');
    right: 15px;
    width: 30px;
    height: 30px;
    left: auto;
    background-size: cover;
  }

  .ujia-overlay-scene {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
  }

  .ujia-wrap-scene {
    box-sizing: border-box;
    width: 1000px;
    height: 542px;
    background: #FFFFFF;
    padding: 25px 15px 25px 25px;
    box-sizing: content-box;
    position: absolute;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12);
  }

  .carousel-img {
    width: 699px;
    height: 482px;
  }
</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <img class="img-fluid" style="width: 100%" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/pc/banner.png"/>
  <div class="d-flex flex-column mx-auto filter-container">
    <div class="d-flex flex-column mx-auto filter-content">
      <form class="layui-form filter-search" lay-filter="form" style="margin-top: 40px;" action="">
        <div class="layui-form-item" style="display: flex;justify-content: flex-end;">
          <div class="layui-inline" style="display: flex;">
            <div>
              <input style="width: 300px;height: 40px" type="text" name="building" placeholder="输入小区名称"
                     autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline" style="display: flex">
            <button class="layui-btn filter-submit" lay-submit="" lay-filter="formSubmit">搜索</button>
          </div>
        </div>
      </form>
      <div class="filter-item">
        <section>类型</section>
        <div style="display: flex; flex-wrap: wrap; align-items: center">
          <a class="filter-type" data-index="0" href="{$Request.root}/cases.html?type=">不限</a>
          {volist name="type" id="v"}
          <a class="filter-type" data-index="{$v.id}" href="{$Request.root}/cases.html?type={$v.id}">{$v.name}</a>
          {/volist}
        </div>
      </div>
      <div class="filter-item">
        <section>风格</section>
        <div style="display: flex; flex-wrap: wrap; align-items: center">
          <a class="filter-style" data-index="0" href="{$Request.root}/cases.html?style=">不限</a>
          {volist name="styleList" id="v" offset="0" length='9'}
          <a class="filter-style" data-index="{$v.id}" href="{$Request.root}/cases.html?style={$v.id}">{$v.name}</a>
          {/volist}
        </div>
      </div>
      <div class="filter-item">
        <section>户型</section>
        <div style="display: flex; flex-wrap: wrap; align-items: center">
          <a class="filter-housing" data-index="0" href="{$Request.root}/cases.html?housing=">不限</a>
          {volist name="housing" id="v"}
          <a class="filter-housing" data-name="{$v}" href="{$Request.root}/cases.html?housing={$v}">{$v}</a>
          {/volist}
        </div>
      </div>
      <div class="filter-item">
        <section>面积</section>
        <div style="display: flex; flex-wrap: wrap; align-items: center">
          <a class="filter-area" data-index="0" href="{$Request.root}/cases.html?area=">不限</a>
          {volist name="area" id="v"}
          <a class="filter-area" data-index="{$v.id}" href="{$Request.root}/cases.html?area={$v.id}">{$v.name}</a>
          {/volist}
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex flex-column mx-auto cases-container">
    <div class="cases-list">
      {volist name='list' id='item'}
      <div class="cases-item">
        <a onclick="caseClick('{$item.id}')" href="javascript:void(0)"><img class="img-fluid" src="{$item.cover}" alt=""/></a>
        <div>
          <p class="case-title">{$item.building}丨{$item.style|getStyle}丨{$item.housing}</p>
          <div class="case-action">
            <button class="case-detail" onclick="window.location.href='{$Request.root}/case/{$item.id}.html'" data-caseid="{$item.id}">案例详情</button>
            <button class="case-money">这样装多少钱？</button>
          </div>
        </div>
      </div>
      {/volist}
    </div>
    <nav class="max-width">
      <ul class="pagination">
        {$list|raw}
      </ul>
    </nav>
  </div>
</section>

<!-- 效果图案例遮罩层START -->
<div class="ujia-overlay-scene" id="ujia-layer-case-effect" style="display: none">
  <div class="ujia-wrap-scene" id="ujia-wrap-effect">
    <div style="">
      <div id="building" style="font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;"></div>
      <img id="closeEffect" src="https://res.bestyoujia.com/web/UJGC/common/pc/img/cases/close.png"
           style="position: absolute;right: 18px;top: 18px;cursor: pointer">
      <div style="display: flex;justify-content: space-between">
        <div style="margin-top:20px;width: 750px;height: 482px;border-right: 1px #ccc solid;padding-right: 50px">
          <!-- Swiper -->
          <div class="swiper-container" style="overflow: hidden">
            <div class="swiper-wrapper" id="imgsWrapEffect">
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <!-- Add Pagination -->
            <div class="swiper-pagination" style="bottom: 70px;"></div>
          </div>
        </div>
        <div
            style="display: flex;flex-direction: column; justify-content:center;align-items: center;width: 250px;margin-left: 40px;box-sizing: border-box">
          <img id="designerAvatar" style="width: 130px;height: 130px; border-radius: 50%; cursor: pointer" src=""/>
          <span id="designerName" style="font-size:18px;
font-family:Source Han Sans CN;color: #333333; margin-top: 30px;"></span>
          <span style="font-size:18px;
font-family:Source Han Sans CN;color: #333333; margin-top: 15px; text-align: center">擅长风格：<br/><span id="designerStyle" style="color: #666"></span></span>
          <button class="appointment-designer"
                  style="background: #93412C; border-radius: 20px ;font-size: 17px;color: #FFFFFF; padding: 8px 35px; margin-top: 60px;border: 0">
            预约设计师
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 效果图案例遮罩层END -->
{/block}
{block name="js"}
{load href="https://res.bestyoujia.com/common/third/swiper/5.0.3/swiper.min.js" /}
{load href="https://res.bestyoujia.com/common/third/vue/2.6.9/vue.min.js" /}
<script>

  $('.navbar-nav').children('li').eq(4).addClass('nav-active');

  $('.case-consult').on('click', function () {
    window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1');
  });

  const {style = '', housing = '', area = '', type = ''} = parseUrlSearch();

  $('.filter-style').eq(0).addClass('selected');
  $('.filter-housing').eq(0).addClass('selected');
  $('.filter-area').eq(0).addClass('selected');

  if (style || housing || area || type || window.location.href.includes('style') || window.location.href.includes('housing') || window.location.href.includes('area') || window.location.href.includes('type')) {
    $('html,body').animate({scrollTop: $('.filter-container').offset().top}, 300);
  }

  $('.filter-type').each(function (e) {
    const index = $(this).data('index');
    if (!type) {
      $('.filter-type').eq(0).addClass('selected');
    }
    if (window.location.href.includes('type')) {
      if (Number(type) === index) {
        $(this).addClass('selected');
        $('.filter-type').eq(0).removeClass('selected');
      }
    }
  });

  $('.filter-style').each(function (e) {
    const index = $(this).data('index');
    if (!style) {
      $('.filter-style').eq(0).addClass('selected');
    }
    if (window.location.href.includes('style')) {
      if (Number(style) === index) {
        $(this).addClass('selected');
        $('.filter-style').eq(0).removeClass('selected');
      }
    }
  });

  $('.filter-housing').each(function (e) {
    const name = $(this).data('name');
    if (!housing) {
      $('.filter-housing').eq(0).addClass('selected');
    }
    if (window.location.href.includes('housing')) {
      if (housing === name) {
        $(this).addClass('selected');
        $('.filter-housing').eq(0).removeClass('selected');
      }
    }
  });

  $('.filter-area').each(function (e) {
    const index = $(this).data('index');
    if (!area) {
      $('.filter-area').eq(0).addClass('selected');
    }
    if (window.location.href.includes('area')) {
      if (Number(area) === index) {
        $(this).addClass('selected');
        $('.filter-area').eq(0).removeClass('selected');
      }
    }
  });

  // $('.case-modal').on('click',  function(event) {
  //     if (event.target == this){
  //         $(this).fadeOut();
  //         $("body,html").css({"overflow":"auto"});
  //     }
  // });

  function caseClick(id) {
    $('.swiper-pagination').empty();
    var swiper = new Swiper('.swiper-container', {
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,//修改swiper的父元素时，自动初始化swiper
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // pagination: {
      //   el: '.swiper-pagination'
      // },
    });
    $('#ujia-layer-case-effect').show();
    $('#imgsWrapEffect').empty();

    let album = '';
    $.ajax({
      url: `{$Request.root}/api/caseInfo?id=${id}`,
      type: "GET",
      async: false,
      dataType: "json",
      success: function (result) {
        console.log(result.data);
        const {building, case_style, housing, avatar, type, name, style} = result.data;
        $('#building').text(`${building} | ${getStyle(case_style)} | ${housing}`);
        $('#designerName').text(`${getDesignerType(type)}：${name}`);
        $('#designerAvatar').attr("src", avatar);
        $('#designerStyle').text(`${style}`);

        for (var i = 0; i < result.data.album.length; i++) {
          album += '<div class="swiper-slide">' +
            '<img class="carousel-img" src="' + result.data.album[i].img_url + '" alt="">' +
            '<div style="width: 100%;display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-align: left;font-size: 15px;margin-top: -54px;background: rgba(0,0,0,.5);color:#fff;padding: 6px 10px">' + result.data.album[i].intro + '</div> </div>';
        }

        const emptyDom = '<div style="display: flex;justify-content: center;align-items: center;width: 100%;color: #999">暂无图片信息</div>'

        if (result.data.album.length === 0) {
          $('#imgsWrapEffect').append(emptyDom);
        } else {
          $('#imgsWrapEffect').append(album);
        }


      },
      error: function (xhr) {
        console.log(xhr);
        album = "";
      }
    });

    $('#closeEffect').on("click", function () {
      $('#ujia-layer-case-effect').fadeOut();
    });

  }

  // 预约设计师
  $('.appointment-designer').on('click', function () {
    showAppointmentDialog('预约设计师');
    $('.right-container-appointment').hide();
    $('.enroll-right').hide();
    $('.enroll-left').css('border', 'none');
    $('.enroll-left').css('padding', '0 20px 0 20px');
    $('.enroll-style').hide();
  });

  // 这样装多少钱
  $('.case-money').on('click', function () {
    $('.right-container-appointment').show();
    $('.enroll-left').hide();
    $('.enroll-right').hide();
    $('#enroll-container').fadeIn();
    $('#enroll-content').css({"display": "flex"});
    $("body,html").css({"overflow": "hidden"});
  });

  const styleMap = {
    1: '现代',
    2: '简约',
    3: '北欧',
    4: '美式',
    5: '轻奢',
    6: '日式',
    7: '混搭',
    8: '新中式',
    9: '轻工业',
  };

  function getStyle(style) {
    let name = '其它';
    const styles = style.length && style.split(',');
    return styleMap[styles[0]];
  }

  function getDesignerType(type) {
    let name = '';
    switch (type) {
      case 1:
        name = "主案设计师";
        break;
      case 2:
        name = "美居规划师";
        break;
      case 3:
        name = "改造师";
        break;
      case 4:
        name = "定制设计师";
        break;
      default:
        name = "其它";
    }
    return name;
  }
</script>
{/block}